<template>
  <div class="loginforme-page">
    <ul>
      <li class="loginforme">
        <el-form
          :model="lg"
          status-icon
          :rules="rules"
          ref="lg"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="lg.username">
            <el-input type="text" v-model="lg.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="lg.password">
            <el-input type="password" v-model="lg.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('lg')">登录</el-button>
            <el-button @click="resetForm('lg')">重置</el-button>
          </el-form-item>
        </el-form>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
@Component({
  components: {}
})
export default class Login extends Vue {
  
  private data() {
    var validatePass = (rule: object, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule: object, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    return {
      lg: {
        username: "",
        password: ""
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  }
  submitForm(formName: any) {
    (this.$refs[formName] as any).validate((valid: any) => {
      if (valid) {
        this.login();
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }
  resetForm(formName: any) {
    (this.$refs[formName] as any).resetFields();
  }
  login() {
    axios
      .get("/login",{
        params: (this as any).lg
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }
}
</script>

<style lang="scss">
.loginforme-page {
  .loginforme {
    width: 400px;
    margin-top: 200px;
    position: absolute;
    left: 50%;
    margin-left: -200px;
  }
}
</style>
 